<template>
  <tm-app>
    <tm-navbar title="收益记录" :followTheme="true" :hideHome="true">
    </tm-navbar>
    <tm-sheet :margin="[30, 20]" :round="4">
      <tm-spin :load="state.load" tip="数据加载中">
        <view style="min-height: 280rpx">
          <view
            class="flex flex-row flex-row-top-start mb-n6"
            v-for="item in state.promptList"
            :key="item.id"
          >
            <tm-icon
              name="tmicon-md-planet"
              color="#666"
              :font-size="28"
              _class="mr-n4"
            ></tm-icon>
            <tm-text :font-size="28" color="#666" _class="text-overflow-5">{{
              item.sysValue
            }}</tm-text>
          </view>
        </view>
      </tm-spin>
    </tm-sheet>
    <tm-sheet :margin="[30, 20]" :round="4">
      <tm-spin :load="state.load" tip="数据加载中" style="min-height: 280rpx">
        <view>
          <tm-text _class="mb-n6 text-weight-b" :font-size="28"
            >邀请类型</tm-text
          >
          <tm-radio-group
            v-if="state.inviteTypeList.length"
            v-model="apiForm.inviteLevel"
            :followTheme="true"
          >
            <tm-radio
              :value="item.sysValue"
              :label="item.sysRemark"
              v-for="item in state.inviteTypeList"
              :key="item.id"
            ></tm-radio>
          </tm-radio-group>
          <tm-text v-else _class="mb-n6" :font-size="24" color="#666666"
            >暂无可选类型</tm-text
          >
        </view>
        <!-- <view>
          <tm-text _class="my-n6 text-weight-b" :font-size="28"
            >邀请比例</tm-text
          >
          <tm-stepper
            v-model="apiForm.inviteProportion"
            :round="30"
            :follow-theme="true"
            :max="70"
            :defaultValue="50"
            color="primary"
            bgColor="primary"
            circular
          ></tm-stepper>
        </view> -->
      </tm-spin>
    </tm-sheet>



    <tm-button
      :margin="[30, 10, 30, 10]"
      :round="10"
      block
      label="block"
      :loading="state.loading"
      @click="createInviteCode"
    >
      生成邀请码
    </tm-button>
    <tm-button
      :margin="[30, 10, 30, 0]"
      :round="10"
      block
      label="block"
      outlined
      @click="userHandltToMy"
    >
      我的邀请码
    </tm-button>

    <tm-message ref="msg"></tm-message>
  </tm-app>
</template>

<script setup>
import { getInviteInfoApi, addInviteCodeApi } from "@/api";
import { reactive, onMounted, ref } from "vue";

const apiForm = ref({
  inviteLevel: "", // 城市合伙人 HHR 、团长 TZ 、拓展员 TZY、商家 SJ、普通用户 YH
  inviteProportion: 50, // 0-100 整数
});
const state = reactive({
  //   提示
  promptList: [],
  //   邀请类型
  inviteTypeList: [],
  loading: false,
  //   创建邀请码的返回内容
  createInviteCodeResult: {},
  load: false,
});

const msg = ref(null);

onMounted(async () => {
  state.load = true;
  const res = await getInviteInfoApi();
  state.promptList = res.promptList;
  state.inviteTypeList = res.inviteTypeList;
  if (res.inviteTypeList.length) {
    apiForm.value.inviteLevel = res.inviteTypeList[0].sysValue;
  }
  state.load = false;
});

const createInviteCode = async () => {
  state.loading = true;
  const res = await addInviteCodeApi(apiForm.value);
  state.createInviteCodeResult = res;
  msg.value.show({ model: "success", text: "创建成功" });
  state.loading = false;
  setTimeout(() => {
    userHandltToMy();
  }, 500);
};

const userHandltToMy = () => {
  uni.navigateTo({
    url: "/myPages/my-invite",
  });
};
</script>

<style scoped></style>
